<template>
  <div class="scroll-wrapper" ref="refScroll" @scroll="hScroll">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          v-for="item in list"
          :key="item.art_id"
          :title="item.title"
          @click="$router.push('/article/' + item.art_id)"
        >
          <div slot="label">
            <!-- {{ item.cover.images }} -->
            <van-grid
              v-if="item.cover.images"
              :column-num="item.cover.images.length"
            >
              <van-grid-item
                v-for="(img, index) in item.cover.images"
                :key="index"
              >
                <van-image lazy-load :src="img" />
              </van-grid-item>
            </van-grid>
            <!-- 文字区域 -->
            <div class="meta">
              <span>{{ item.aut_name }}</span>
              <span>{{ item.comm_count }}评论</span>
              <span>{{ item.pubdate | relativeTime }}</span>
              <span
                class="close"
                v-if="$store.state.tokenInfo.token"
                @click.stop="hMoreAction(item.art_id)"
              >
                <van-icon name="cross" />
              </span>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>

    <!-- 弹出层 -->

    <van-popup v-model="isShowMoreAction" :style="{ width: '80%' }">
      <MoreAction @un-like="hUnLike" @report="hReport" ref="moreAction" />
    </van-popup>
  </div>
</template>

<script>
import MoreAction from '../moreAction.vue'
import { getArticles } from '@/api/articleList.js'
import { unLike, report } from '@/api/article.js'
export default {
  name: 'ArticleList',
  props: ['channel'],
  components: {
    MoreAction
  },
  data () {
    return {
      list: [],
      loading: false,
      refreshing: false,
      finished: false,
      timestamp: Date.now(),
      isShowMoreAction: false, // 初始不显示弹层
      articleId: null
    }
  },
  activated () {
    if (this.scrollTop) {
      this.$refs.refScroll.scrollTop = this.scrollTop
    }
  },

  methods: {
    hScroll () {
      console.log(this.$refs.refScroll.scrollTop)
      this.scrollTop = this.$refs.refScroll.scrollTop
    },

    // 下拉刷新
    async onRefresh () {
      const res = await getArticles(this.channel.id, Date.now())
      const arr = res.data.data.results
      this.list.unshift(...arr)

      this.refreshing = false
      this.$toast.success('烦死了,还看！')
    },


    // 上滑加载
    async onLoad () {
      const res = await getArticles(this.channel.id, this.timestamp)
      // console.log(res)
      const arr = res.data.data.results
      this.list.push(...arr)
      this.tiemstamp = res.data.data.pre_timestamp
      console.log(this.list)

      // 加载状态结束
      this.loading = false

      if (arr.length === 0 || res.data.data.pre_timestamp === null) {
        this.finished = true
      }
      this.$toast.success('还没看够？')
    },

    // 弹出层
    showPopup () {
      this.show = true
    },

    hMoreAction (id) {
      // 显示弹层
      this.isShowMoreAction = true
      // 保存id
      this.articleId = id
      if (this.$refs.moreAction) {
        this.$refs.moreAction.isReport = false
      }
    },
    async hUnLike () {
      try {
        // 调用接口

        const res = await unLike(this.articleId)
        console.log(res)
        // 删除文章
        this.delArticle(this.articleId)
        this.$toast.success('操作成功')
        // 关闭弹层
        this.isShowMoreAction = false
      } catch (err) {
        this.$toast.fail('操作失败')
      }
    },
    delArticle (articleId) {
      // 找到文章
      const idx = this.list.findIndex(item => {
        if (item.art_id === articleId) {
          return true
        }
      })
      console.log(idx)

      // 删除
      if (idx !== -1) {
        this.list.splice(idx, 1)
      }
    },
    async hReport (typeId) {
      try {
        const res = await report(this.articleId, typeId)
        console.log(res)
        this.delArticle(this.articleId)
        this.isShowMoreAction = false
        console.log('举报类型是', typeId)

        this.$toast.success('举报有奖，再来一次？')
      } catch (err) {
        this.$toast.fail('操作失败')
        console.log(err)
      }
    }
  }



}
</script>

<style scoped lang='less'>
.meta {
  display: flex;

  span {
    margin-right: 10px;
  }
  .close {
    margin-left: auto;
  }
}
</style>
